<template>
  <div class="register-list" v-if="show"> 
     <el-table
        ref="singleTableRef" header-cell-class-name="heardClassName"
        :data="tableData"
        highlight-current-row
        style="width: 100%" height="200px"
        @current-change="handleCurrentChange"
      >
        <el-table-column property="patientName" label="患者" width="100" />
        <el-table-column property="patientGender" label="性别" width="80" >
          <template #default="{row}">
            {{ row.patientGender == 1 ? '男' : row.patientGender == 2 ? '女' :'未知' }}
          </template>
        </el-table-column>
        <el-table-column property="name" label="年龄" width="100"  >
          <template #default="{row}">
            {{ row.ageYear }}年{{ row.ageMonth }}月
          </template>
        </el-table-column>
        <el-table-column property="patientPhone" label="电话" width="" />
        <el-table-column property="idCard" label="身份证号" width="200" />
        <el-table-column property="lastVisitDate" label="上次就诊" width="" />
    </el-table>


  </div>
</template>
<script setup lang="ts">
  import type { AnyColumn } from 'element-plus/es/components/table-v2/src/common.mjs';
  const emit = defineEmits([ 'select']);

  const tableData = ref<any>([]); 
  const currentRow = ref<any>(null);
  const show = ref<boolean>(false);
  const handleCurrentChange = (val: any) => {
    currentRow.value = val
    emit('select', currentRow.value)
    show.value = false
  }
  defineExpose<{
    open: (row: AnyColumn) => void;
    close: () => void;
  }>({
    open: async(row: any) => {
      tableData.value = row
      show.value = true

    },
    close: () => {
      show.value = false
    }
  });

</script>
<style lang="scss" scoped>
  .register-list{
    position: fixed;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 0 1px #e6e6e6;
    padding: 0 0 8px 0;
    width: 800px;
    z-index: 999;
    overflow: auto;
  }
  ::v-deep(.heardClassName) {
    background-color: #f5f7fa !important; /* 浅蓝色背景 */
  }
</style>